<template>
  <div>
    <p class="login-title">短信验证登录</p>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="phone"
            label="手机号"
            placeholder="请输入手机号"
            left-icon="phone-o"
          >
            <van-icon v-show="phone" @click="phone = ''" slot="button" name="close" />
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <van-button slot="button" :disabled="disabled" @click="getCode()" size="small" type="primary">{{this.btntxt}}</van-button>
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-button class="login-btn" @click="registered" round size="large">登录</van-button>
    <p class="the-registered">
      <router-link class="the-registered-to" to='/login'>账号密码登录</router-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: 'login-sms',
    data() {
      return {
        phone: '',
        sms: '',
        disabled: false,
        btntxt: '获取验证码',
        time: 0
      }
    },
    methods: {
      getCode() {
        if (!this.phone) {
          this.$toast('手机号不能为空')
        }
        if (!this.$objectUtil.checkPhone(this.phone)) {
          this.$toast('手机号格式错误')
        }
        this.$post('/api/api/student/login/phoneCode', this.$qs.stringify({phone: this.phone})).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast(res.data.errorMessage)
              return false
            }
            this.time = 60
            this.disabled = true
            this.timer()
            this.$toast.success('发送成功')
          } else {
            this.$toast.fail('发送失败')
          }
        })
      },
      registered() {
        if (!this.phone) {
          this.$toast('手机号不能为空')
          return false
        }
        if (!this.$objectUtil.checkPhone(this.phone)) {
          this.$toast('手机号格式错误')
          return false
        }
        if (!this.sms) {
          this.$toast('请输入验证码')
          return false
        }
        let url = '/api/sys/staff/login'
        let form = this.$qs.stringify({
          mobile: this.phone,
          status: 1,
          code: this.sms
        })
        this.$post(url, form).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast(res.data.errorMessage)
              return false
            }
            if (res.data.routeUrl === '/index') {
              localStorage.setItem('x-token', res.data.token)
              this.$router.push(res.data.routeUrl)
            }
          }
        }).catch((err) => {
          if (err.status === 500) {
            this.$toast('验证码错误或已经失效')
          }
        })
      },
      timer() {
        if (this.time > 0) {
          this.time--
          this.btntxt = this.time + 's后获取'
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.btntxt = '获取验证码'
          this.disabled = false
        }
      }
    }
  }
</script>

<style scoped>
  .login-title{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin: 80px 0;
  }
  .login-btn{
    width: 84%;
    background: #36aaf5;
    color: #fff;
    margin: 40px 8%;
  }
  .the-registered{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin-top: 40px;
  }
  .the-registered-to{
    font-size: 24px;
    color: #d5d5d5;
    text-decoration:underline;
  }
</style>

